<template>
	<!-- <cover-view> -->
		
	<scroll-view scroll-y="true" v-if="show">
	<view v-if="show" class="guideBox" :style="!fixed?'position:absolute':''">
		<!-- 新增商品 -->
		<view class="main" v-if="title=='proPage'">
			<template v-for="(item,index) in guideData[title]">
				<view :key="index" v-show="index == onIndex">
					<template v-if="index<(guideData[title].length-1)">
						<view class="title col-f">{{item.title}}</view>
						<scroll-view class="pro_img" :scroll-top="scrollTop" scroll-y @scrolltolower="noscroll" @touchend="noscroll">
							<image lazy-load :src="item.url" mode="widthFix"></image>
						</scroll-view>
						<view class="pro_tip"><image :src="item.tip" mode="widthFix"></image></view>
					</template>
					<template v-else>
						<view class="img-wrap" :class="item.type" :key="index" v-show="index == onIndex">
							<image lazy-load :src="item.url" mode="widthFix"></image>
						</view>
					</template>
				</view>
			</template>
			<!-- 页码 -->
			<view class="dots dis-flex flex-x-center m-top30">
				<view class="dots-item" :class="onIndex==index?'dots-item-active':''" v-for="(item,index) in 2" :key="index" @tap.stop="bindChange(index)"></view>
			</view>
			<view class="nextStep" v-show="onIndex < (guideData[title].length-1)" @tap.stop="nextStep">
				<image v-if="onIndex < (guideData[title].length-2)" src="http://pic.kaidanxia.com/2020-07-15/202007151630495f1b37716.png" mode="widthFix"></image>
				<image v-if="onIndex == (guideData[title].length-2)" src="http://pic.kaidanxia.com/2020-07-15/20200715163054a8e6b6599.png" mode="widthFix"></image>
			</view>
			<view class="nextStep pro_iknow" v-if="onIndex == (guideData[title].length-1)" @tap.stop="Iknow">
				<image src="http://pic.kaidanxia.com/2020-07-15/20200715163054a8e6b6599.png" mode="widthFix"></image>
			</view>
			<!-- 跳过 -->
			<view class="jump" @tap.stop="Iknow">
				<image src="http://pic.kaidanxia.com/2020-07-15/2020071516304560f932860.png" mode="widthFix"></image>
			</view>
		</view>
		
		<block v-else>
			<template v-for="(item,index) in guideData[title]">
				<view class="img-wrap" :class="item.type" :key="index" v-show="index == onIndex">
					<image lazy-load :src="item.url" mode="widthFix"></image>
				</view>
			</template>
			<view class="nextStep" :style="nextStyle" v-show="onIndex < (guideData[title].length-1)" @tap.stop="nextStep">
				<image src="http://pic.kaidanxia.com/2020-07-15/202007151630495f1b37716.png" mode="widthFix"></image>
			</view>
			<view class="nextStep" :style="endStyle" v-show="onIndex == (guideData[title].length-1)" @tap.stop="Iknow">
				<image src="http://pic.kaidanxia.com/2020-07-15/20200715163054a8e6b6599.png" mode="widthFix"></image>
			</view>
			<!-- 跳过 -->
			<view class="jump" v-if="title=='goodsList'" @tap.stop="Iknow">
				<image src="http://pic.kaidanxia.com/2020-07-15/2020071516304560f932860.png" mode="widthFix"></image>
			</view>
		</block>
	</view>
	</scroll-view>
	<!-- </cover-view> -->
</template>

<script>
let timer = null;  //设置全局定时器变量
const App = getApp().globalData;
export default {
  data() {
    return {
		show: false,
		
		//新增商品
		scrollTop: 0,
		scrollHeight: null,
		
		onIndex : 0,//默认显示第一张
		guideData: {
			//首页
			indexPage: [
				 {url:'http://pic.kaidanxia.com/2020-07-18/202007181654330837e5239.png',type: 'top'},{url:'http://pic.kaidanxia.com/2020-07-18/202007181654260524a7308.png',type: 'top'}
			],//关注
			attentionPage: [
				 {url:'http://pic.kaidanxia.com/2020-07-18/202007181654214c25a9755.png',type: 'top'},{url:'http://pic.kaidanxia.com/2020-07-18/202007181654183aad01264.png',type: 'top'}
			],//关注详情
			attenDetailPage: [
				 {url:'http://pic.kaidanxia.com/2020-07-18/20200718165434dce329129.png',type: 'bottom'},
			],//关注
			listPage: [
				 {url:'http://pic.kaidanxia.com/2020-07-18/20200718165430393485519.png',type: 'top'},{url:'http://pic.kaidanxia.com/2020-07-18/20200718165427cacfe7718.png',type: 'top'}
			],
			//渠道中心
			distribution: [
				 {url:'http://pic.kaidanxia.com/2020-08-05/20200805180251bb64a6783.png',type: 'top'},{url:'http://pic.kaidanxia.com/2020-08-05/202008051802492b2516809.png',type: 'top'},{url:'http://pic.kaidanxia.com/2020-08-05/20200805180250b20548053.png',type: 'top'},{url:'http://pic.kaidanxia.com/2020-08-05/20200805190801e145f1289.png',type: 'top'},{url:'http://pic.kaidanxia.com/2020-08-05/20200805180248bd3ed9784.png',type: 'top'}
			],
			//店铺商品列表
			goodsList: [
				 {url:'http://pic.kaidanxia.com/2020-07-18/202007181654224e6bc8590.png',type: 'top'},{url:'http://pic.kaidanxia.com/2020-07-18/2020071816542267ccf0544.png',type: 'top'},{url:'http://pic.kaidanxia.com/2020-07-18/20200718165423ec2ed4092.png',type: 'top'},{url:'http://pic.kaidanxia.com/2020-07-18/202007181654251522e9769.png',type: 'top'},{url:'http://pic.kaidanxia.com/2020-07-18/2020071816542316fe52172.png',type: 'top'},{url:'http://pic.kaidanxia.com/2020-07-18/2020071816542488ed85595.png',type: 'top'},{url:'http://pic.kaidanxia.com/2020-07-18/20200718165426112b82100.png',type: 'top'}
			],//浏览轨迹
			trajectory: [
				{url:'http://pic.kaidanxia.com/2020-07-18/202007181654201bc440943.png',type: 'top'},
			],//浏览轨迹详情
			trajectoryDe: [
				{url:'http://pic.kaidanxia.com/2020-07-18/20200718165418d73d29430.png',type: 'top'},
			],
			//新增商品
			proPage: [
				{title: '示例一(多规格同价)',url:'http://pic.kaidanxia.com/2020-07-15/20200715163033d5b4e6395.png',tip:'http://pic.kaidanxia.com/2020-07-15/20200715163033a7f4e9687.png'},{title: '示例二(多规格异价)',url:'http://pic.kaidanxia.com/2020-07-15/20200715163033d5b4e6395.png',tip:'http://pic.kaidanxia.com/2020-07-15/20200715163035803d13503.png'},//{title: '示例三',url: 'http://pic.kaidanxia.com/2020-07-15/202007151630524f53d0093.png',tip: 'http://pic.kaidanxia.com/2020-07-15/20200715163035803d13503.png'},
				{url:'http://pic.kaidanxia.com/2020-07-18/20200718165434757fb6978.png',type: 'bottom'},
			],
			//店铺主页-龙虾
			retailShop4: [
				{url:'https://pic.kaidanxia.com/2020-08-17/202008171920087a9673946.png',type: 'top'},
			],//明虾
			retailShop3: [
				{url:'https://pic.kaidanxia.com/2020-08-17/20200817192014112824609.png',type: 'top'},
			],
			retailShop2: [
				{url:'https://pic.kaidanxia.com/2020-08-17/20200817192014112824609.png',type: 'top'},
			],
			// 优选
			optimization: [
				{url:'http://pic.kaidanxia.com/2020-08-08/20200808201949543dc7159.png',type: 'top'},
			],
		}
	};
  },

  components: {
  },
  props: {
    // 弹出方向
    title: {
      type: String,
      default: '',
    },
		//是否固定
    fixed: {
      type: Boolean,
      default: true,
    },
		//结束按钮样式
		endStyle: {
      type: String,
      default: '',
		},
		//下一步按钮样式
		nextStyle: {
      type: String,
      default: '',
		},
  },
  mounted() {
	  // if (this.title != '' && App.isGride(this.title)) {
			// this.show = true
	  // }
  },
  methods: {
	  close() {
		  this.show = false
	  },
		// 下一步
		nextStep(){
			this.onIndex++;
			if(this.onIndex==2&&this.title == 'proPage'){
				this.scrollTop = 0;
				if(this.scrollTop >= 772){
					clearTimeout(timer)
					timer = null;
				}else{
					clearTimeout(timer)
					timer = setInterval(()=>{
						this.scrollTop ++ 
					 }, 10); 
				}
			}
		},
		//知道啦
	  Iknow() {
		  App.setGride(this.title)
		  this.show = false
	  },
		//禁止滚动
		noscroll() {
			clearTimeout(timer)
			timer=null;
		},
		//页码
		bindChange(n){
			this.onIndex = n
			// if(this.onIndex==2&&this.title == 'proPage'){
			// 	this.scrollTop = 0;
			// 	if(this.scrollTop >= 775){
			// 		clearTimeout(timer)
			// 		timer = null;
			// 	}else{
			// 		clearTimeout(timer)
			// 		timer = setInterval(()=>{
			// 			this.scrollTop ++ 
			// 		 }, 10); 
			// 	}
			// }
		},
  }
};
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>
